export const addRejuCard = (editor) => {
  // ------------------------------------------------------------------------------------------------------------ 
  /*
    解决方案卡片组件
    悬浮指着解决方案卡片能横向展开信息栏
  */
  editor.Components.addType('rejuType', {
    model: {
      defaults: {
        styles: `.reju{display: flex;justify-content: center;font-size: medium;color: white;font-weight: bold;width: 100px;
                  height: 300px;float: left;margin: 0px 10px;transition: 0.1s;}
              .rejuBase{width: 100px;height: 300px;position: absolute;}
              .rejuBackground{ width: 100px;height: 300px;position: absolute;}
              .rejuFocus{width: 0px;height: 300px;position: absolute;}
              .rejuTitle{position: absolute;margin-top: 1%;}
              .rejuShow{display: none;width: 200px;height: 270px;}
              .rejuButton{border-radius: 3px;border: none;bottom: 0px;width: 130px;color: white;height: 30px;position: absolute;background-color: rgba(73, 140, 247, 1);font-size: 10px;}
              .rejuSetting{bottom: 0px;right: 0px;font-size: 10px;background-color: lightskyblue;position: absolute;border: none;border-radius: 3px;width: 65px;color: white;height: 30px;}
              .reju:hover{width: 300px;}
              .reju:hover .rejuBase{ width: 270px;}
              .reju:hover .rejuBackground{display: none;}
              .reju:hover .rejuFocus{ width: 270px;}
              .reju:hover .rejuTitle{ display: none;}
              .reju:hover .rejuShow{ display: inherit;position: absolute;margin-top: 1%;z-index: 10;}`,
              script() {
                const that = this
                // 元素监听-搜索框获取焦点事件
                var thx = document.getElementById(this.attributes.id.value);
                thx.getElementsByClassName('rejuSetting')[0].onclick = function () {
                  var setting = prompt("请输入数据源后端接口,注意数据源只能设置一次！", "");
                  if (setting) {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function () {
                      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var result = JSON.parse(xmlhttp.response);
                        thx.getElementsByClassName('rejuBase')[0].src = result.data.coverImageUrl;
                        thx.getElementsByClassName('rejuBackground')[0].src = result.data.backgroundImageUrl;
                        thx.getElementsByClassName('rejuTitle')[0].innerText = result.data.title.substring(0, 4);
                        thx.getElementsByClassName('rejuContent')[0].innerText = result.data.text;
                        thx.getElementsByClassName('englishTitle')[0].innerText = result.data.englishTitle;
                        thx.getElementsByClassName('showTitle')[0].innerText = result.data.title;
                        thx.getElementsByClassName('rejuSetting')[0].hidden = true;
                      };
                    }
                    xmlhttp.open("GET", setting, true);
                    xmlhttp.send();
                  }
                }
              }
      },
    }
  });
  // 注册组件
  editor.Blocks.add('reju', {
    label: '解决方案卡片',
    category: '产品中心组件',
    content: {
      type: 'rejuType',
      content: '<div class="reju">\
              <img class="rejuBase" src="https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/926e15af8f4c635018a86703a0529577.jpg">\
              <img class="rejuBackground" src="https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/fs5kz6fq6ahw2el7/ff40b9b44eaaa3c28beda015384c19ab.svg">\
              <img class="rejuFocus" src="https://cdn4.codesign.qq.com/prototypes/2023/08/10/xDP3923q32qn08ZwlKp10/fs5kz6fq6ahw2el7/877d18deb11bfa9924e97844bf012d29.svg">\
              <div class="rejuTitle">建筑行业</div>\
              <div class="rejuShow">\
                  <p style="font-size: 18px;color: black;">\
                      <span class="showTitle">建筑行业方案</span><br/>\
                      <span class="englishTitle" style="font-size: 13px;font-weight: normal;color: black;">Construction Industry</span><br/>\
                      <span class="rejuContent" style="font-weight: lighter;font-size: 11px;color: rgba(0, 0, 0, 0.79);">\
                          艾三维建筑行业解决方案根据项目设计建筑行业信息化方案及建筑BIM解决方案,提供BIM咨询、BIM设计、BIM施工、数字化交付、施工动画及BIM运维等解决方案。\
                      </span>\
                  </p>\
                  <br/>\
                  <button class="rejuButton" onclick="alert(`了解详情`)">了解详情</button>\
                  <button class="rejuSetting">设置数据源</button>\
              </div>\
          </div>'
    },
  });

}